/*
		NOTE: Each popup needs its own id to function rn because of the variable setting in scripts
		
		TODOs as of 12/11: 
			(COMPLETE) make it so the JS is told what popup to target for the window opening and closing; Suspicion: Need popup opener to have unique ID and for close button to have unique ID too 
			(WIP) change opener to text instead of button (find out if onClick attribute can be added to text instead of btn)
			(WIP) make a more concise way of the opening/closing method that doesn't need coder to type unique ids for everything or can automatically generate an id for interior objects based on main object id
		*/

		/*EDIT POPUP ASTHETICS HERE*/
		.popup {
			z-index: 9;
			background-color: #2d4f5c;/*matches main body color*/
			border: 1px solid black; /*changed*/
			text-align: center;
			
			min-height: 150px;
			min-width: 300px;
			max-height: 700px;/*450px*/
			max-width: 900px;/*900px*/

			border-radius: 5px;

			/*popup autos as closed -> needs button to open*/
			visibility: hidden;

			/*TODO: add open/close movement*/
		}
		
		/*Dragable*/
		.popup {
			position: absolute;
			/*resize: both; !*enable this to css resize*! */
			overflow: auto;
		} 
		
		.popup p, h1, h2, h3, summary {
			padding: 10px; /*adds space from div wall for text*/
		}
		
		.popup img {
		  width: 100%;
		  }

		.popup-header {
			/*header portion of the popup*/
			padding: 10px; /*changed from 10*/
			cursor: move;
			z-index: 10; 
			background-color: #10212b; /*dark blue bg*/
			color: #f2ec91; /*yellow color font*/
		}

		/*opening section*/
		.open-popup {
			visibility: visible;

			/*TODO: add open/close movement*/
			}


		/*Resizeable section*/
		.popup .resizer-right {
		  width: 5px;
		  height: 100%;
		  background: transparent;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: e-resize;
		}

		.popup .resizer-bottom {
		  width: 100%;
		  height: 5px;
		  background: transparent;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: n-resize;
		}

		.popup .resizer-both {
		  width: 5px;
		  height: 5px;
		  background: transparent;
		  z-index: 10;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: nw-resize;
		}

		/*exit button*/		
		.exit-btn {
		  float: right; /*causes button to be on the far right*/	
		}

		/*NOSELECT*/
		.popup * {
		  -webkit-touch-callout: none; /* iOS Safari */
		  -webkit-user-select: none; /* Safari */
		  -khtml-user-select: none; /* Konqueror HTML */
		  -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
		  user-select: none; /* Non-prefixed version, currently
										  supported by Chrome and Opera */
		}